<template>
    <div class="article-list">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <getArt v-for="(item,index) in article" :key="index" :channel="item"/>
                <!-- <van-cell v-for="(item,index) in article" :key="index" :title="item.title" /> -->
            </van-list>
        </van-pull-refresh>

        
        
    </div>
</template>
<script>
import getArt from '@/component/article-item/index'
import { getArticles } from '@/api/article'
export default {
    name:'ArticleList',
    props:{
        channels:{
            type:Object,
            required:true
        }
    },
    data() {
        return {
            article: [],
            loading: false,
            finished: false,
            isLoading:false,
            fresh:''
            //timestamp:Date.now()
        }
    },
    methods: {
        async onLoad() {

            const { data } = await getArticles({
                channel_id:this.channels.id,
                timestamp:Date.now(),	
                with_top:1
            })

            const { results } = data.data
            this.article.push(...results)
            //console.log(data)

            // 加载状态结束
            this.loading = false

            if(results.length){
                this.timestamp = data.data.pre_timestamp
            }else{
                // 数据全部加载完
                this.finished = true
            }

            
            
        },
        async onRefresh(){
            const { data } = await getArticles({
                channel_id:this.channels.id,
                timestamp:Date.now(),	
                with_top:1
            })

            const { results } = data.data
            this.article.unshift(...results)
            //console.log(data)
            this.isLoading = false
        }
    },
    components:{
        getArt
    }
}
</script>
<style lang="less" scoped>
    .article-list{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 50px;
        top: 90px;
        overflow-y: auto;
    }
</style>